<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.div{
			width: 300px;
			height: 300px;
			border: 10px solid black;
			position: relative;
		}
		span{
			width: 100px;
			height: 100px;
			background: red;
			text-align: center;
			line-height: 100px;
			font-style: 40px;
	/* float: left; */
	position: absolute;
		}
		.span1{

			left: 100px;
		}
		.span2{
			top: 100px;
		}
		.span3{
			right: 0px;
			top: 100px;
		}
		.span4{
			bottom: 0px;
			left:100px;
		}


	.box1{

		width: 400px;
		height: 400px;
		border: 10px solid blue;
		margin: 0 auto;
		position: relative;
		left: 300px;

	}	
	.box2{
		width: 100px;
		height: 100px;
		background: yellow;
		text-align: center;
		position: absolute;
		left: 100px;

	}
	.box3{
		width: 100px;
		height: 100px;
		background: yellow;
		text-align: center;
		position: fixed;
		left: 0px;
		top: 0px

	}
	#box4{
		width: 100px;
		height: 100px;
		background: red
	  
	}
	#box5{
		width: 200px;
		height: 200px;
		border: 2px solid blue;
		position: relative;
		left: 10px;
		top: 10px;

	}

	#span1{
			width: 200px；
		height:200px;
		background: red;
		z-index: 1;
			
	}
	#span4{
        width: 100px；
		height:100px;
		background: blue;
	   z-index: 6；

	}
	</style>

<!--
	定位：把一个元素按照一定的方式  定到页面的某一个位置

	position  :
		相对定位 relative   
		   针对的是自己本身位置进行定位
		绝对定位  absolute
		    针对有定位的父级的原点进行定位(如果父级没有定位的时候会找父级的父级，如果都没定位，最后会针对document进行定位)
		    绝对定位入如果没有初始值也一定要设置值left:0px;top:0px;
		固定定位  fixed
		     针对页面窗口进行的定位
		     注意IE6不支持固定定位
	偏移量
	    left：100px(表示距离左边100px)
	    top
	    right
	    bottom	
	    注意left和top的优先级高于right和bottom


定位的三种特性
    相对定位 relative
           1不影响元素本身的特性。
           2不使元素脱离文档流
           3提升层级  
           4无法触发bfc
           5针对自己本身进行定位   
	绝对定位  absolute
	      1会使元素完全脱离文档流。	
	      2内容撑开宽度。
	      3使元素支持所有css样式。	
	      4提升层级
	         z-index：？px   数字越高层级 定位层级设置越高（多个重叠时哪个）
	       5绝对定位一定要和相对定位配合使用
	       6如果有定位父级，针对定位父级发生偏移，没有定位父级正对document进行偏移。
	       7如果绝对定位的子级有浮动，可以省略清浮动的操作。  
	 固定定位的特性
	      不兼容ie6 ,针对窗口进行定位   
-->

</head>
<body>
<div class="div">
	<span class="span1">1</span>
	<span class="span2">2</span>
	<span class="span3">3</span>
	<span class="span4">4</span>
	</div>

<div class="box1">
	相对定位relative
	<div class="box2">
		绝对定位absolute
	</div>

</div>
<div class="box3">
	固定定位fixed
</div>
----------------------------------------------------
<div id="box4">定位的特性</div>
<div id="box5">box5</div>

-------------------------------------------------
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span1</span>
<span id="span4">提升层级</span>
</body>
</html>